<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
    <!-- 
    <div class="input-group">
      <input type="text" v-model="inputValue" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur" />
      <div class="label" v-if="showPlaceholder">请输入内容</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { getRolePageList } from '@/api/sys/system'
import { deleteRole } from '@/api/sys/role'
import { useDrawer } from '@/components/Drawer'
import RoleDrawer from './RoleDrawer.vue'
import { columns, searchFormSchema } from './role.data'
import { ref } from 'vue'

defineOptions({ name: 'RoleManagement' })

const [registerDrawer, { openDrawer }] = useDrawer()
const [registerTable, { reload }] = useTable({
  title: '角色列表',
  api: getRolePageList,
  size: 'small',
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  useSearchForm: true,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: true,
  actionColumn: {
    width: 80,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
    fixed: undefined,
  },
})

function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  })
}

function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  })
}

async function handleDelete(record: Recordable) {
  const res = await deleteRole(record.roleId)
  !res && reload()
}

function handleSuccess() {
  reload()
}

const inputValue = ref('');
const placeholder = ref('请输入内容');
const showPlaceholder = ref(false);
const handleFocus = () => {
  if (inputValue.value === '') {
    showPlaceholder.value = true;
    placeholder.value = ''
  }
};

const handleBlur = () => {
  if (inputValue.value === '') {
    showPlaceholder.value = false;
    placeholder.value = '请输入内容'
  }
};

</script>

<style scoped>
.input-group {
  display: inline-block;
  position: relative;
}

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;

  /* 移除输入框的上边框 */
}

.label {
  position: absolute;
  z-index: 10;
  top: -10px;
  left: 10px;
  padding: 0 5px;
  background: #fff;
  color: #666;
  font-size: 12px;
  white-space: nowrap;
}
</style>
